﻿<script src="lib/vue-2.4.0.js" type="text/javascript" charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>

<div id="app">
	<router-link to='/account'>Account</router-link>
	<transition></transition>
	<router-view></router-view>
	</transition>
</div>

<template id="templateid">
	<div id="">
		<h1>这是Account组件</h1>
		<!--<router-link to="/login">登录</router-link>-->
		<router-link to="/account/login">登录</router-link>
		<router-link to="/account/register">注册</router-link>
		<transition mode="out-in">
			<router-view></router-view>
		</transition>
	</div>
</template>


<script type="text/javascript">
	var account = {
		template: '#templateid'
	}

	var login = {
		template: '<h3>登录组件</h3>'
	}
	var register = {
		template: '<h3>注册组件</h3>'
	}

	var routerobj = new VueRouter({
		routes: [{
			path: '/account',
			component: account,
			// 使用 children 属性，实现子路由，同时，子路由的 path 前面，不要带 / ，否则永远以根路径开始请求，这样不方便我们用户去理解URL地址
			children: [{
				//path: '/login',
				path: 'login',
				component: login
			},
			{
				path: 'register',
				component: register
			},]
		}]
	})

	var vm = new Vue({
		el: '#app',
		data: {},
		methods: {},
		router: routerobj,
	})
</script>

<style type="text/css">
	.v-enter,
	.v-leave-to {
		opacity: 0;
		transform: translateX(150px);
	}

	.v-enter-active,
	.v-leave-active {
		transition: all 1s ease;
	}
</style>